import * as React from 'react';

import {IBoxRect} from './IBoxRect';
import './CanvasSelectionBox.css';
import {IView} from '../../types/IView';

export interface CanvasSelectionBoxProps {
  boxRect: IBoxRect;
  selectedView: IView;
  canvasOffsetLeft?: number;
  canvasOffsetTop?: number;
}

class CanvasSelectionBox extends React.Component<CanvasSelectionBoxProps, undefined> {
  render() {
    const {boxRect} = this.props;

    if (Object.keys(boxRect).length === 0) {
      return null;
    }

    const canvasOffsetLeft = this.props.canvasOffsetLeft || 0;
    const canvasOffsetTop = this.props.canvasOffsetTop || 0;

    const boxTopStyle = {
      top: boxRect.top - canvasOffsetTop,
      left: boxRect.left - canvasOffsetLeft,
      width: boxRect.width,
      height: 0
    };
    const boxBottomStyle = {
      top: boxRect.top + boxRect.height - canvasOffsetTop,
      left: boxRect.left - canvasOffsetLeft,
      width: boxRect.width,
      height: 0
    };
    const boxLeftStyle = {
      top: boxRect.top - canvasOffsetTop,
      left: boxRect.left - canvasOffsetLeft,
      width: 0,
      height: boxRect.height
    };
    const boxRightStyle = {
      top: boxRect.top - canvasOffsetTop,
      left: boxRect.left + boxRect.width - canvasOffsetLeft,
      width: 0,
      height: boxRect.height
    };
    return (
      <div className="CanvasSelectionBox">
        <div className="CanvasSelectionBox-edge CanvasSelectionBox-edge-horizontal" style={boxTopStyle}/>
        <div className="CanvasSelectionBox-edge CanvasSelectionBox-edge-horizontal" style={boxBottomStyle}/>
        <div className="CanvasSelectionBox-edge CanvasSelectionBox-edge-vertical" style={boxLeftStyle}/>
        <div className="CanvasSelectionBox-edge CanvasSelectionBox-edge-vertical" style={boxRightStyle}/>
      </div>
    );
  }
}

export default CanvasSelectionBox;
